<template>
  <div class="left-menu-box">
    <div class="userinfo v-align-c pad-20">
      <img class="width-48 height-48"
        :src="loginUserObj.avatar" alt="">
      <span class="font-color-3 font-16 mar-l-9">{{loginUserObj.phone}}</span>
    </div>
    <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
      <el-sub-menu index="1">
        <template #title>
          <span>交易记录</span>
        </template>
        <router-link :to="{name: 'my-order'}">
          <el-menu-item index="1-1">订单管理</el-menu-item>
        </router-link>
        <router-link :to="{name: 'unpaid-order'}">
          <el-menu-item index="1-2">待付款订单</el-menu-item>
        </router-link>
        <router-link :to="{name: 'after-sales-order'}">
          <el-menu-item index="1-3">售后订单</el-menu-item>
        </router-link>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <span>商品服务</span>
        </template>
        <router-link :to="{name: 'platform-goods'}">
          <el-menu-item index="2-1">平台商品</el-menu-item>
        </router-link>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <span>个人设置</span>
        </template>
        <router-link :to="{name: 'save'}">
          <el-menu-item index="3-1">安全中心</el-menu-item>
        </router-link>
        <router-link :to="{name: 'store-management'}">
          <el-menu-item index="3-2">店铺管理</el-menu-item>
        </router-link>
        <router-link :to="{name: 'address'}">
          <el-menu-item index="3-3">收货地址</el-menu-item>
        </router-link>
      </el-sub-menu>
    </el-menu>
  </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    onMounted
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    useState
  } from '@/store/utils/useState'
  export default defineComponent({
    setup() {
      const router = useRouter()
      const storeState = useState('user', ['loginUserObj'])
      onMounted(() => {
        if (!storeState.loginUserObj) {
          router.push({
            path: '/login'
          })
        }
      })
      const handleOpen = (key: string, keyPath: string[]) => {}
      const handleClose = (key: string, keyPath: string[]) => {

      }
      return {
        handleOpen,
        handleClose,
        ...storeState
      }
    }
  })
</script>

<style lang="scss" scoped>
  .left-menu-box {
    width: 200px;
    background: #fff;
  }

  .userinfo {
    img {
      border-radius: 50%;
    }
  }
</style>
